<template>
    <div class="box-content authority">
        <div class="navigation">权限管理/权限设置</div>
        <div class="mt-3">
            <el-table
                    :data="fileData"
                    v-loading="loading"
                    align="center"
                    :element-loading-text="loadText"
                    :header-cell-style="tableHeaderColor"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="订单号"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="user.name"
                        label="商户名"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        label="订单条件"
                        width="280">
                    <template slot-scope="scope">
                        <div>行业: {{scope.row.type?scope.row.type.type:'无'}}</div>
                        <div>地区: {{scope.row.place}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="条数"
                        width="200">
                    <template slot-scope="scope">
                        <div>{{scope.row.days * scope.row.number}}/{{scope.row.all_send}}/{{scope.row.today_send}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="下单日期"
                        align="center"
                        width="140">
                    <template slot-scope="scope">
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status_link"
                        label="订单状态"
                        width="80">
                </el-table-column>

                <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        width="100"
                >
                    <template slot-scope="scope">

                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-3 float-right">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.current_page"
                        :page-size="pageInfo.per_page"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "authority",
        data() {
            return {
                loading:false,
                searchStr:'',
                loadText: '角色数据获取中，请稍等',
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1,
                },
                fileData: []
            }
        },
        created(){
            this.getOrderList();
        },
        methods:{
            getOrderList() {
                this.loading = true;
                this.$http.get('api/admin/common/apply' + this.searchStr, {
                    params: {
                        pageSize: this.pageInfo.per_page,
                        page: this.pageInfo.current_page
                    }
                })
                    .then((result) => {
                        this.fileData = result.data;
                        this.pageInfo.total = result.meta.total;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            handleSizeChange(val) {
                this.pageInfo.current_page = 1;
                this.pageInfo.per_page = val;
                this.getOrderList();
            },
            handleCurrentChange(val) {
                this.pageInfo.current_page = val;
                this.getOrderList();
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            }
        }
    }
</script>

<style scoped>

</style>